{% load i18n %}
<div id="target">
    <h2>{% if grids.exists %}{% translate "Grids" %}{% else %}{% translate "No grids found" %}{% endif %}</h2>
    {% if grids.exists %}
        <p class="clickable">{% translate "Click a grid to add your package to it." %}</p>
    {% endif %}
    {% for grid in grids %}
        <dl class="grid-item" id="grid-{{ grid.id }}">
            <dt><strong>{{ grid.title }}</strong></dt>
            <dd class="description">{{ grid.description }}</dd>
        </dl>
    {% endfor %}
    <script type="text/javascript">
        {% for grid in grids %}
            $('#grid-{{ grid.id }}').mouseover(function() {
                $('#grid-{{ grid.id }}').addClass("clickable");
            });
            $('#grid-{{ grid.id }}').mouseout(function() {
                $('#grid-{{ grid.id }}').removeClass("clickable");
            });
            $('#grid-{{ grid.id }}').click(function() {
                $('form#find-a-grid-form').attr('action', "{% url 'add_grid_package' grid.slug %}");
                $("form#find-a-grid-form").submit();
            });
        {% endfor %}
    </script>
</div>
